<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <link rel="StyleSheet" href="css/mypetstore.css" type="text/css" media="screen"/>

</head>
<body>
    <div th:include="common/top :: #Header"></div>

    <div id="Content">
        <div id="Welcome" xmlns:th="http://www.thymeleaf.org">
            <!--显示登录用户的firstName-->
        </div>
        <div id="Main">

            <div id="Sidebar">
                <div id="SidebarContent">
                    <a href="categoryForm?categoryId=FISH"><img src="img/fish_icon.gif"></a><br/>
                    Saltwater, Freshwater<br/>
                    <a href="categoryForm?categoryId=DOGS"><img src="img/dogs_icon.gif"></a><br/>
                    Various Breeds<br/>
                    <a href="categoryForm?categoryId=CATS"><img src="img/cats_icon.gif"></a><br/>
                    Various Breeds, Exotic Varieties<br/>
                    <a href="categoryForm?categoryId=REPTILES"><img src="img/reptiles_icon.gif"></a><br/>
                    Lizard, Turtles, Snakes<br/>
                    <a href="categoryForm?categoryId=BIRDS"><img src="img/birds_icon.gif"></a><br/>
                    Exotic Varieties
                </div>
            </div>


            <div id="MainImage">
                <div id="MainImageContent">
                    <map name="estoremap">
                        <area alt="Birds" coords="72,2,280,250" href="categoryForm?categoryId=BIRDS"
                              shape="RECT" onmouseover="showProductInfo('BIRDS', event)" onmouseout="hideProductInfo()">
                        <area alt="Fish" coords="2,180,72,250" href="categoryForm?categoryId=FISH"
                              shape="RECT" onmouseover="showProductInfo('FISH', event)" onmouseout="hideProductInfo()">
                        <area alt="Dogs" coords="60,250,130,320" href="categoryForm?categoryId=DOGS"
                              shape="RECT" onmouseover="showProductInfo('DOGS', event)" onmouseout="hideProductInfo()">
                        <area alt="Reptiles" coords="140,270,210,340" href="categoryForm?categoryId=REPTILES"
                              shape="RECT" onmouseover="showProductInfo('REPTILES', event)" onmouseout="hideProductInfo()">
                        <area alt="Cats" coords="225,240,295,310" href="categoryForm?categoryId=CATS"
                              shape="RECT" onmouseover="showProductInfo('CATS', event)" onmouseout="hideProductInfo()">
                        <area alt="Birds" coords="280,180,350,250" href="categoryForm?categoryId=BIRDS"
                              shape="RECT" onmouseover="showProductInfo('BIRDS', event)" onmouseout="hideProductInfo()">
                    </map>
                    <img src="img/splash.gif" height="355" align="middle"
                         usemap="#estoremap" width="350">

                </div>
            </div>

            <!-- 悬浮窗 -->
            <div id="popup" class="popup"></div>

            <div id="Separator">&nbsp;</div>
        </div>
    </div>

    <div th:include="common/bottom ::#Footer"></div>
</body>
</html>